import React, { useState } from 'react';
import s from './style.module.css';
import {
  Input,
  Checkbox,
  Collapse,
  Form,
  Radio,
  Datetime,
  Textarea,
  Helper,
  Tooltip,
  Confirm,
  Switch,
  Select,
} from '@knownsec/react-component';
import SelectAnt from '@/components/SelectAnt/index';
import Big from 'big.js';
import cn from 'classnames';
import CheckboxGroup from '@/components/CheckboxGroup';
import { MONTOR_AVILIABLE_MAP, TIME_TYPE } from '@/common/common.js';
import { deal_data } from '@/common/constant.js';
import recursionForm from '@/common/recursionForm';
import { Link } from 'react-router-dom';
import { getTemSearch, productInfo } from '~/API/index';
import {drop} from "lodash"
const { Panel } = Collapse;
const layout = {
  // labelCol: { span: 2 },
  // wrapperCol: { span: 16 },
};
const MONITOR_SECURITY_MAP = [
  { label: '暗链', value: 'black_links' },
  { label: '挖矿', value: 'cryptojacking' },
  { label: '挂马', value: 'malscan' },
  //   { label: 'SEO劫持', value: 'seo_hijack' },
  // { label: '外链', value: 'image_check' },
  {
    label: '敏感词',
    value: 'keyword',
    tip: '检测ChatGPT、政治、涉黄、反动、涉黑、暴恐、博彩、民生、其他9类词库敏感词',
  },
  {
    label: '隐私信息',
    value: 'privacy_disclosure',
    tip: '检测银行卡号、手机号、身份证号、邮箱号等隐私信息',
  },
  // { label: '变更信息', value: 'statistics', tip: '检测图片、文本信息变更' },
];
const DEEPS_MAP = [
  { label: '1', value: 1 },
  { label: '2', value: 2 },
  { label: '3', value: 3 },
  { label: '4', value: 4 },
  { label: '5', value: 5 },
  { label: '10', value: 10 },
];
const MAXPAGES_MAP = [
  { label: '50', value: 50 },
  { label: '100', value: 100 },
  { label: '200', value: 200 },
  { label: '300', value: 300 },
  { label: '500', value: 500 },
  { label: '1000', value: 1000 },
  { label: '5000', value: 5000 },
  { label: '10000', value: 10000 },
];
export default function Monitor({ formData, params = {}, sysinfo, onChange }) {
  const [isInclude, setIsInclude] = useState(false);
  const [isChangeInclude, setIsChangeInclude] = useState(false);
  const [singeTaskDisable, setDisable] = useState(true);
  // 控制变基量
  const [updateDisable, setUpdateDisable] = useState(false);
  const [scanOptions, setScanOptions] = useState([]);
  const createForm = React.useRef();
  const [form] = Form.useForm();
  const formAvailability = Form.useWatch('availability', form);
  console.log('[ formAvailability ]-78', formAvailability)
  //初始化Formdata
  const initData = (scanArr) => {
    const job_config_map = formData.job_config_map;
    setDisable(!Boolean(job_config_map.is_solo));
    const availability = job_config_map.availability;
    let include_pluginsAV = {};
    availability.include_plugins.forEach((e) => {
      include_pluginsAV[e] = true;
    });
    const securityEvent = job_config_map.securityEvent;
    let include_plugins = {};
    securityEvent.include_plugins.forEach((e) => {
      include_plugins[e] = true;
    });
    const vul = job_config_map.vul;
    const risk_link = job_config_map.risk_link;
    const target_info = job_config_map.target_info;
    const fullKEY = scanArr.map((item) => {
      return item.value;
    });
    const scan_profiles = [];
    vul?.scan_profiles.forEach((e) => {
      fullKEY.includes(e + '') && scan_profiles.push(e + '');
    });

    const changeCheck = job_config_map.change_check;
    setUpdateDisable(Boolean(changeCheck.is_automatic_update_baseline));
    createForm.current.setFieldsValue({
      is_solo: Boolean(job_config_map.is_solo),
      availability: {
        include_plugins: include_pluginsAV,
        use_cloud: availability.use_cloud,
        cloud_abnormal_node: availability.cloud_abnormal_node*1,
      },
      securityEvent: {
        crawler_depth: [securityEvent?.crawler_depth || ''],
        crawler_scope: securityEvent.crawler_scope,
        include_plugins,
        crawler_max_page: [securityEvent?.crawler_max_page || ''],
        include_url: securityEvent.include_url.join('\n'),
        evidence: Boolean(securityEvent.evidence),
      },
      vul: {
        crawler_depth: [vul?.crawler_depth || ''],
        crawler_max_page: [vul?.crawler_max_page || ''],
        scan_profiles: scan_profiles,
      },
      risk_link: {
        crawler_depth: [risk_link?.crawler_depth || ''],
        crawler_max_page: [risk_link?.crawler_max_page || ''],
      },
      change_check: {
        crawler_depth: [changeCheck?.crawler_depth || ''],
        crawler_max_page: [changeCheck?.crawler_max_page || ''],
        crawler_scope: changeCheck.crawler_scope,
        include_url: changeCheck.include_url.join('\n'),
        exclude_url: changeCheck.exclude_url.join('\n'),
        text_change_ratio: changeCheck.text_change_ratio
          ? (changeCheck.text_change_ratio * 100).toFixed(2)
          : '',
        structure_change_ratio: changeCheck.structure_change_ratio
          ? (changeCheck.structure_change_ratio * 100).toFixed(2)
          : '',
        resource_change_ratio: changeCheck.resource_change_ratio
          ? (changeCheck.resource_change_ratio * 100).toFixed(2)
          : '',
        automatic_update_baseline_interval: [changeCheck?.automatic_update_baseline_interval || ''],
        is_check_text: Boolean(changeCheck.is_check_text),
        is_check_structure: Boolean(changeCheck.is_check_structure),
        is_check_resource: Boolean(changeCheck.is_check_resource),
        is_automatic_update_baseline: Boolean(changeCheck.is_automatic_update_baseline),
      },
      target_info: {
        enable: target_info?.enable,
      },
    });
    securityEvent.crawler_scope > 2 ? setIsInclude(true) : setIsInclude(false);
    changeCheck.crawler_scope > 2 ? setIsChangeInclude(true) : setIsChangeInclude(false);
  };
  //待提交的表单数据
  const onValues = (data, allValues) => {
    let values = {};
    let val;
    let ks;
    if (data.hasOwnProperty('is_solo')) {
      values = { is_solo: data?.is_solo || false };
    } else {
      const dt = Object.values(data)[0];
      ks = Object.keys(dt);
      val = ks.reduce((total, key) => {
        let value;
        if (dt[key].selectedItem) {
          if (dt[key].selectedItem.length > 0) {
            if (dt[key].selectedItem.length > 1) {
              value = dt[key].selectedItem.map((item) => item.value);
            } else {
              value = [dt[key].selectedItem[0].value];
            }
          } else if (dt[key].selectedItem.length === 0) {
            value = [''];
          }
        } else if (Object.keys(dt[key]).indexOf('value') > -1) {
          value = dt[key].value;
        } else {
          value = dt[key];
        }
        total.push(value);
        return total;
      }, []);
      const obj = Object.assign({}, data);
      for (let it in obj) {
        for (let ite in obj[it]) {
          obj[it][ite] = val[0];
        }
      }
      values = obj;
    }
    createForm.current.setFieldsValue(values);
    if (values.hasOwnProperty('availability')) {
      const availability = allValues.availability;
      availability.include_plugins &&
        (availability.include_plugins = Object.keys(availability.include_plugins).filter(
          (item) => availability.include_plugins[item]
        ));
      availability.cloud_abnormal_node=values.availability.cloud_abnormal_node*1
      onChange('job_config_map', { availability });
      return;
    } else if (values.hasOwnProperty('securityEvent')) {
      const securityEvent = allValues.securityEvent;
      if (securityEvent.hasOwnProperty('crawler_scope')) {
        securityEvent.crawler_scope > 2 ? setIsInclude(true) : setIsInclude(false);
      }
      securityEvent.include_url &&
        (securityEvent.include_url = securityEvent.include_url.split('\n'));
      if (securityEvent.include_plugins) {
        let include_plugins = [];
        Object.keys(securityEvent.include_plugins).forEach((e) => {
          securityEvent.include_plugins[e] &&
            e !== 'statistics' &&
            e !== 'image_check' &&
            include_plugins.push(e);
        });
        securityEvent.include_plugins = include_plugins;
      }
      securityEvent.crawler_depth = deal_data(securityEvent?.crawler_depth);
      securityEvent.crawler_max_page = deal_data(securityEvent?.crawler_max_page);
      onChange('job_config_map', { securityEvent });
      return;
    } else if (values.hasOwnProperty('vul')) {
      const vul = allValues.vul;
      vul.crawler_depth = deal_data(vul?.crawler_depth);
      vul.crawler_max_page = deal_data(vul?.crawler_max_page);
      vul.scan_profiles = deal_data(vul?.scan_profiles, true);
      vul.scan_profiles = vul.scan_profiles.map((e) => {
        return isNaN(e * 1) ? e : e * 1;
      });
      onChange('job_config_map', { vul });
      return;
    } else if (values.hasOwnProperty('risk_link')) {
      const risk_link = allValues.risk_link;
      risk_link.crawler_depth = deal_data(risk_link?.crawler_depth);
      risk_link.crawler_max_page = deal_data(risk_link?.crawler_max_page);
      onChange('job_config_map', { risk_link });
      return;
    } else if (values.hasOwnProperty('change_check')) {
      const change_check = allValues.change_check;
      const vChange = values.change_check;
      const allKeys = Object.keys(change_check);
      const keys = Object.keys(values.change_check)[0];
      allKeys.map((e) => {
        if (e.includes('ratio')) {
          if (typeof change_check[e] !== 'object' && change_check[e]) {
            change_check[e] = new Big(change_check[e]).div(100).toString();
          } else {
            change_check[e] = '';
          }
          if (keys.includes('ratio')) {
            if (values.change_check[keys]) {
              change_check[keys] = new Big(values.change_check[keys]).div(100).toString();
            }
          }
        }
      });
      //sel框
      change_check.crawler_depth = deal_data(change_check?.crawler_depth);
      change_check.crawler_max_page = deal_data(change_check?.crawler_max_page);
      change_check.automatic_update_baseline_interval = deal_data(
        change_check?.automatic_update_baseline_interval
      );
      if ('crawler_scope' in change_check) {
        change_check.crawler_scope > 2 ? setIsChangeInclude(true) : setIsChangeInclude(false);
      }
      change_check.exclude_url = change_check.exclude_url
        ? change_check.exclude_url.split('\n')
        : [];
      change_check.include_url = change_check.include_url
        ? change_check.include_url.split('\n')
        : [];
      const isArr = [
        'is_automatic_update_baseline',
        'is_check_text',
        'is_check_structure',
        'is_check_resource',
      ];
      const keys0 = Object.keys(vChange)[0];
      if (isArr.includes(keys0)) {
        keys0 === 'is_automatic_update_baseline' && setUpdateDisable(Boolean(vChange[keys0]));
        change_check[keys0] = Boolean(vChange[keys0]);
      }
      onChange('job_config_map', { change_check });
    } else if (values.hasOwnProperty('target_info')) {
      const target_info = allValues.target_info;
      onChange('job_config_map', { target_info });
      return;
    } else {
      setDisable(!values.is_solo);
      onChange('job_config_map', { is_solo: Boolean(values.is_solo) });
    }
  };
  // 获取漏洞模版
  const getTem = async () => {
    const res = await getTemSearch();
    const arr = res.data.templates.map((e) => {
      const label = e.display_name?.zh_cn ? e.display_name.zh_cn : e.description;
      const value = e.template_id + '';
      return { label, value };
    });
    setScanOptions(arr);
    initData(arr);
  };
  React.useEffect(() => {
    MONITOR_SECURITY_MAP.forEach((e, i) => {
      if (!sysinfo.includes(e.value)) {
        MONITOR_SECURITY_MAP[i].disabled = true;
      }
    });
    getTem();
  }, []);
  return (
    <div className={s.monitorForm}>
      <Form
        {...layout}
        ref={createForm}
        form={form}
        name="control-ref"
        onValuesChange={(changedValues, allValues) => {
          if ('is_solo' in changedValues) {
            const value = changedValues.is_solo;
            let msg = value
              ? '启用后，此业务系统检测配置将单独控制，不受任务组配置影响，您确定要启用吗？'
              : '关闭后，此业务系统检测将按对应任务组配置检测，您确定要关闭吗？';
            Confirm({
              pro: true,
              title: '提示',
              className: s.dialogName,
              message: <div className="confirmbox">{msg}</div>,
              onconfirm: () => {
                onValues(changedValues, allValues);
              },
              oncancel: () => {
                createForm.current.setFieldsValue({ is_solo: !value });
              },
            });
          } else {
            onValues(changedValues, allValues);
          }
        }}
      >
        {params.type === 'solo' && (
          <Form.Item
            name="is_solo"
            label={
              <span>
                启用单个业务系统设置
                <Helper
                  className="paddingHelp"
                  placement="top"
                  overlay="开启后，监测此站点时将忽略任务组相关配置。"
                ></Helper>
              </span>
            }
            className={s.itemSolo}
            valuePropName="checked"
          >
            <Switch pro />
          </Form.Item>
        )}
        {/* 可用性 */}
        <Collapse className={s.Collapse} defaultActiveKey={1}>
          <Panel header="可用性" key="1">
            <Form.Item
              name={['availability', 'include_plugins']}
              label="监测项"
              className={s.item}
              valuePropName="checked"
            >
              <CheckboxGroup
                disabled={singeTaskDisable && params.type === 'solo'}
                options={drop(MONTOR_AVILIABLE_MAP,2)}
                className={s.checkedG1}
              ></CheckboxGroup>
            </Form.Item>

            <Form.Item name={['availability', 'use_cloud']} label="云端可用性" className={s.item}>
              <Radio.Group className={s.radioBorder}>
                <Radio
                  disabled={
                    (singeTaskDisable && params.type === 'solo') || !sysinfo.includes('cloud')
                  }
                  value={true}
                  className={s.radio0}
                >
                  {sysinfo.includes('cloud') ? (
                    <span>启用</span>
                  ) : (
                    <Tooltip overlay={<span>当前版本不支持，请升级服务</span>} placement="topLeft">
                      <div>启用</div>
                    </Tooltip>
                  )}
                </Radio>
                <Radio
                  disabled={
                    (singeTaskDisable && params.type === 'solo') || !sysinfo.includes('cloud')
                  }
                  value={false}
                  className={s.radio0}
                >
                  {sysinfo.includes('cloud') ? (
                    <span>禁用</span>
                  ) : (
                    <Tooltip overlay={<span>当前版本不支持，请升级服务</span>} placement="topLeft">
                      <div>禁用</div>
                    </Tooltip>
                  )}
                </Radio>
              </Radio.Group>
            </Form.Item>
            {formAvailability?.use_cloud&&<div className={s.avaErrBox}>
              异常状态：异常节点大于等于
              <Form.Item name={['availability', 'cloud_abnormal_node']} className={s.item} noStyle>
              <SelectAnt
                    showSearch
                    disabled={
                      (singeTaskDisable && params.type === 'solo') || !sysinfo.includes('cloud')
                    }
                    option={[1,2,3,4,5].map(e=>{
                      return {label:e,value:e}
                    })}
                    className={cn(s.sel, s.ml4)}
                  />
              </Form.Item>
              个时可用性状态异常
            </div>}
          </Panel>
        </Collapse>
        {/* 安全事件 */}
        <Collapse className={s.Collapse} defaultActiveKey={1}>
          <Panel header="安全事件" key="1">
            <Form.Item
              name={['securityEvent', 'crawler_scope']}
              label="监测类型"
              className={s.item}
            >
              <Radio.Group className={s.radioBorder}>
                <Radio
                  disabled={singeTaskDisable && params.type === 'solo'}
                  value={2}
                  className={s.radio0}
                >
                  全量爬取
                </Radio>
                <Radio
                  disabled={singeTaskDisable && params.type === 'solo'}
                  value={3}
                  className={s.radio0}
                >
                  指定页面
                </Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item
              name={['securityEvent', 'include_plugins']}
              label="监测项"
              className={s.item}
              valuePropName="checked"
            >
              <CheckboxGroup
                disabled={singeTaskDisable && params.type === 'solo'}
                options={MONITOR_SECURITY_MAP}
                className={s.checkedG2}
              />
            </Form.Item>
            <div style={{ display: isInclude ? 'flex' : 'none' }} className={s.textAreaBox}>
              <Form.Item
                name={['securityEvent', 'include_url']}
                rules={[{ required: true, message: '请输入监测URL关键词' }]}
              >
                <Textarea
                  disabled={singeTaskDisable && params.type === 'solo'}
                  className={s.textArea}
                  placeholder="请输入监测URL关键词，一行一个。如您需要监测地址是‘http://www.scanv.com/admin/’,可在此输入‘/admin/’即可。若仅监测首页，填写‘/’即可。"
                ></Textarea>
              </Form.Item>
            </div>
            <div style={{ display: isInclude ? 'none' : 'flex' }} className={s.itemBox}>
              <Form.Item
                name={['securityEvent', 'crawler_depth']}
                label="监测深度"
                className={s.item}
              >
                <Select
                  pro
                  disabled={singeTaskDisable && params.type === 'solo'}
                  option={DEEPS_MAP}
                  className={s.sel}
                />
              </Form.Item>
              <Form.Item
                name={['securityEvent', 'crawler_max_page']}
                label="最大页面数"
                className={s.item}
              >
                <Select
                  pro
                  disabled={singeTaskDisable && params.type === 'solo'}
                  option={MAXPAGES_MAP}
                  className={s.sel}
                />
              </Form.Item>
              <div style={{ display: isInclude ? 'flex' : 'none' }} className={s.helperBox}>
                {/* <Form.Item
                  name={['securityEvent', 'crawler_max_page']}
                  label="变更基准更新"
                  className={s.item5m}
                >
                  每监测&ensp;
                  <SelectAnt
                    pro
                    disabled={singeTaskDisable&&params.type === 'solo'}
                    option={[
                      { label: '10', value: 10 },
                      { label: '20', value: 20 },
                      { label: '30', value: 30 },
                    ]}
                    className={s.sel2}
                  />
                  &ensp;次
                <Helper
                  className={s.helper}
                  placement="top"
                  overlay="系统按设置的周期次数自动覆盖更新变更基准信息"
                ></Helper>
                </Form.Item> */}
              </div>
            </div>
            {/*目前不能实现联动显示暂时隐藏 
            <Form.Item name={['securityEvent', 'evidence']} label="是否取证" className={s.item}>
              <Radio.Group className={s.radioBorder}>
                <Radio
                  disabled={singeTaskDisable && params.type === 'solo'}
                  value={true}
                  className={s.radio0}
                >
                  是
                </Radio>
                <Radio
                  disabled={singeTaskDisable && params.type === 'solo'}
                  value={false}
                  className={s.radio0}
                >
                  否
                </Radio>
              </Radio.Group>
            </Form.Item> */}
          </Panel>
        </Collapse>
        {/* Web漏洞 */}
        <Collapse className={s.Collapse} defaultActiveKey={1}>
          <Panel header="漏洞" key="1">
            <div className={s.itemBox} style={{ width: '65rem' }}>
              <Form.Item name={['vul', 'crawler_depth']} label="监测深度" className={s.item4m}>
                <Select
                  pro
                  disabled={
                    (singeTaskDisable && params.type === 'solo') || !sysinfo.includes('vul')
                  }
                  option={DEEPS_MAP}
                  className={s.sel}
                />
              </Form.Item>
              <Form.Item name={['vul', 'crawler_max_page']} label="最大页面数" className={s.item}>
                <Select
                  pro
                  disabled={
                    (singeTaskDisable && params.type === 'solo') || !sysinfo.includes('vul')
                  }
                  option={MAXPAGES_MAP}
                  className={s.sel}
                />
              </Form.Item>
              <Form.Item name={['vul', 'scan_profiles']} label="漏洞模版" className={s.item4m}>
                <Select
                  multiple
                  pro
                  searchable
                  disabled={
                    (singeTaskDisable && params.type === 'solo') || !sysinfo.includes('vul')
                  }
                  option={scanOptions}
                  className={cn(s.sel24, s.selectDisabled)}
                />
              </Form.Item>
              <Helper
                placement="top"
                overlay="全面深入扫描：全量漏洞插件检测；高危漏洞检测：仅高危漏洞插件检测；SQL注入扫描：SQL类插件检测；XSS攻击扫描：跨站脚本攻击类插件检测。"
                className={s.helper}
              ></Helper>
              {localStorage.group === '管理员' && (
                <div className={s.link}>
                  <Link to="/custom_module">自定义</Link>
                </div>
              )}
            </div>
          </Panel>
        </Collapse>
        {/* 风险外链 */}
        <Collapse className={s.Collapse} defaultActiveKey={1}>
          <Panel header="风险外链" key="1">
            <div className={s.itemBox} style={{ width: '46rem' }}>
              <Form.Item name={['risk_link', 'crawler_depth']} label="监测深度" className={s.item}>
                <Select
                  pro
                  disabled={
                    (singeTaskDisable && params.type === 'solo') || !sysinfo.includes('risk_link')
                  }
                  option={DEEPS_MAP}
                  className={s.sel}
                />
              </Form.Item>
              <Form.Item
                name={['risk_link', 'crawler_max_page']}
                label="最大页面数"
                className={s.item}
              >
                <Select
                  pro
                  disabled={
                    (singeTaskDisable && params.type === 'solo') || !sysinfo.includes('risk_link')
                  }
                  option={MAXPAGES_MAP}
                  className={s.sel}
                />
              </Form.Item>
            </div>
          </Panel>
        </Collapse>
        {/* 网页篡改 */}
        <Collapse
          className={s.Collapse}
          defaultActiveKey={1}
          style={{ display: formData.task_config.is_periodic ? 'block' : 'none' }}
        >
          <Panel header="篡改" key="1">
            <Form.Item name={['change_check', 'crawler_scope']} label="监测类型" className={s.item}>
              <Radio.Group className={s.radioBorder}>
                <Radio
                  disabled={
                    (singeTaskDisable && params.type === 'solo') ||
                    !sysinfo.includes('change_check')
                  }
                  value={2}
                  className={s.radio0}
                >
                  全量爬取
                </Radio>
                <Radio
                  disabled={
                    (singeTaskDisable && params.type === 'solo') ||
                    !sysinfo.includes('change_check')
                  }
                  value={3}
                  className={s.radio0}
                >
                  指定页面
                </Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item
              label={
                <>
                  <Helper
                    placement="right"
                    getTooltipContainer={(triggerNode) => triggerNode}
                    overlay={
                      <>
                        <p>监测类型变更结果低于设置的比例，系统将不会呈现详情及告警。</p>
                        <p>内容变更：当次爬取网页源码信息同基准对比分析，计算变更比例；</p>
                        <p>结构变更：当次爬取网页结构信息同基准对比分析，计算变更比例；</p>
                        <p>
                          资源变更：当次爬取站点资源（图片、JS、CSS）同基准对比，有变更的资源数量占总资源数量比例。
                        </p>
                      </>
                    }
                    className={s.helper}
                  ></Helper>
                  监测项
                </>
              }
              className={s.item}
            >
              <div className={s.itemContentBox}>
                <div className={s.itemContent}>
                  <Form.Item
                    name={['change_check', 'is_check_text']}
                    noStyle
                    valuePropName="checked"
                  >
                    <Checkbox
                      disabled={
                        (singeTaskDisable && params.type === 'solo') ||
                        !sysinfo.includes('change_check')
                      }
                    >
                      内容变更
                    </Checkbox>
                  </Form.Item>
                  <Form.Item name={['change_check', 'text_change_ratio']} noStyle>
                    <Input
                      pro
                      option={DEEPS_MAP}
                      className={cn(s.sel, s.ml8)}
                      disabled={
                        (singeTaskDisable && params.type === 'solo') ||
                        !sysinfo.includes('change_check')
                      }
                    />
                  </Form.Item>
                  <div className={s.ml10}>%</div>
                </div>
                <div className={s.itemContent}>
                  <Form.Item
                    name={['change_check', 'is_check_structure']}
                    noStyle
                    valuePropName="checked"
                  >
                    <Checkbox
                      disabled={
                        (singeTaskDisable && params.type === 'solo') ||
                        !sysinfo.includes('change_check')
                      }
                    >
                      结构变更
                    </Checkbox>
                  </Form.Item>
                  <Form.Item name={['change_check', 'structure_change_ratio']} noStyle>
                    <Input
                      pro
                      disabled={
                        (singeTaskDisable && params.type === 'solo') ||
                        !sysinfo.includes('change_check')
                      }
                      option={DEEPS_MAP}
                      className={cn(s.sel, s.ml8)}
                    />
                  </Form.Item>
                  <div className={s.ml10}>%</div>
                </div>
                <div className={s.itemContent}>
                  <Form.Item
                    name={['change_check', 'is_check_resource']}
                    noStyle
                    valuePropName="checked"
                  >
                    <Checkbox
                      disabled={
                        (singeTaskDisable && params.type === 'solo') ||
                        !sysinfo.includes('change_check')
                      }
                    >
                      资源变更
                    </Checkbox>
                  </Form.Item>
                  <Form.Item name={['change_check', 'resource_change_ratio']} noStyle>
                    <Input
                      pro
                      disabled={
                        (singeTaskDisable && params.type === 'solo') ||
                        !sysinfo.includes('change_check')
                      }
                      option={DEEPS_MAP}
                      className={cn(s.sel, s.ml8)}
                    />
                  </Form.Item>
                  <div className={s.ml10}>%</div>
                </div>
              </div>
            </Form.Item>
            <div label="" className={s.updateBox} noStyle>
              <Form.Item
                name={['change_check', 'is_automatic_update_baseline']}
                noStyle
                valuePropName="checked"
              >
                <Checkbox
                  disabled={
                    (singeTaskDisable && params.type === 'solo') ||
                    !sysinfo.includes('change_check')
                  }
                >
                  变更基数更新
                </Checkbox>
              </Form.Item>
              <div className={cn(s.dfac, s.w220)}>
                <div>每监测</div>
                <Form.Item name={['change_check', 'automatic_update_baseline_interval']} noStyle>
                  <SelectAnt
                    showSearch
                    disabled={
                      (singeTaskDisable && params.type === 'solo') ||
                      !sysinfo.includes('change_check') ||
                      !updateDisable
                    }
                    option={Array.from(Array(101), (v, k) => k)
                      .splice(2, 101)
                      .map((e) => {
                        return { label: e + '', value: e };
                      })}
                    className={cn(s.sel, s.ml4)}
                  />
                </Form.Item>
                <div className={s.ml4}>次</div>
                <Helper
                  className={s.ml4}
                  placement="top"
                  overlay={
                    <p>
                      系统按设置的周期次数自动覆盖更新变更基准信息，您也可前往 “策略管理 -
                      变更基准设置”手动更新基准。
                    </p>
                  }
                ></Helper>
              </div>
            </div>
            <div style={{ display: !isChangeInclude ? 'flex' : 'none' }} className={cn(s.dfjf)}>
              <Form.Item
                name={['change_check', 'crawler_depth']}
                label="监测深度"
                className={s.item}
              >
                <Select
                  pro
                  disabled={
                    (singeTaskDisable && params.type === 'solo') ||
                    !sysinfo.includes('change_check')
                  }
                  option={[
                    { label: '1', value: 1 },
                    { label: '2', value: 2 },
                    { label: '3', value: 3 },
                  ]}
                  className={s.sel}
                />
              </Form.Item>
              <Form.Item
                name={['change_check', 'crawler_max_page']}
                label="最大页面数"
                className={s.item7}
              >
                <Select
                  pro
                  disabled={
                    (singeTaskDisable && params.type === 'solo') ||
                    !sysinfo.includes('change_check')
                  }
                  option={[
                    { label: '10', value: 10 },
                    { label: '20', value: 20 },
                    { label: '30', value: 30 },
                    { label: '40', value: 40 },
                    { label: '50', value: 50 },
                    { label: '60', value: 60 },
                    { label: '70', value: 70 },
                    { label: '80', value: 80 },
                    { label: '90', value: 90 },
                    { label: '100', value: 100 },
                  ]}
                  className={s.sel}
                />
              </Form.Item>
            </div>
            <div
              style={{ display: !isChangeInclude ? 'flex' : 'none' }}
              className={cn(s.textAreaBox)}
            >
              <Form.Item
                label="不监测页面"
                className={s.item5m}
                name={['change_check', 'exclude_url']}
              >
                <Textarea
                  disabled={
                    (singeTaskDisable && params.type === 'solo') ||
                    !sysinfo.includes('change_check')
                  }
                  className={cn(s.textArea, s.ml0)}
                  placeholder="请输入不需监测页面URL的关键参数，一行一个，在监测过程中，系统将过滤匹配到参数的页面"
                ></Textarea>
              </Form.Item>
            </div>
            <div
              style={{ display: isChangeInclude ? 'flex' : 'none' }}
              className={cn(s.textAreaBox)}
            >
              <Form.Item
                label="指定页面"
                className={s.item5m}
                name={['change_check', 'include_url']}
              >
                <Textarea
                  disabled={
                    (singeTaskDisable && params.type === 'solo') ||
                    !sysinfo.includes('change_check')
                  }
                  className={cn(s.textArea, s.ml0)}
                  placeholder="请输入监测URL关键参数，一行一个。如您需要监测地址是‘http://www.scanv.com/admin/’,可在此输入‘/admin/’即可。若仅监测首页，填写‘/’即可"
                ></Textarea>
              </Form.Item>
            </div>
          </Panel>
        </Collapse>
        {/* 业务系统信息 */}
        <Collapse className={s.Collapse} defaultActiveKey={1}>
          <Panel header="业务系统信息" key="1">
            <Form.Item
              name={['target_info', 'enable']}
              label="监测业务系统信息"
              className={s.itemSolo2}
            >
              <Radio.Group className={s.radioBorder}>
                <Radio
                  disabled={singeTaskDisable && params.type === 'solo'}
                  value={true}
                  className={s.radio0}
                >
                  启用
                </Radio>
                <Radio
                  disabled={singeTaskDisable && params.type === 'solo'}
                  value={false}
                  className={s.radio0}
                >
                  禁用
                </Radio>
              </Radio.Group>
            </Form.Item>
          </Panel>
        </Collapse>
      </Form>
    </div>
  );
}
